<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
#div1 {
	height: 520px;
	background-color: rgb(0, 0, 0);
	margin-top: 30px;
}

h1 {
	text-align: center;
}
</style>
</head>
<body>
	红:
	<input type="range" id="inp1" value="0" min="0" max="255"
		onclick="fun();" onmousemove="fun();">
	<font id="f1">0</font>
	<br> 绿:
	<input type="range" id="inp2" value="0" min="0" max="255"
		onclick="fun();" onmousemove="fun();">
	<font id="f2">0</font>
	<br> 蓝:
	<input type="range" id="inp3" value="0" min="0" max="255"
		onclick="fun();" onmousemove="fun();">
	<font id="f3">0</font>
	<hr>
	<button id="btn1" onclick="m4();">随机</button>
	<h1 onclick="m4()" id="h1">请放飞自我!</h1>
	<div id="div1"></div>
	<script type="text/javascript">
		function fun() {
			f1.innerHTML = inp1.value;
			f2.innerHTML = inp2.value;
			f3.innerHTML = inp3.value;
			div1.style.backgroundColor = "rgb(" + f1.innerHTML + ","
					+ f2.innerHTML + "," + f3.innerHTML + ")";
		}
		/* function m1() {
			f1.innerHTML = inp1.value;
			div1.style.backgroundColor = "rgb(" + f1.innerHTML + ","
			+ f2.innerHTML + "," + f3.innerHTML + ")";
		}
		function m2() {
			f2.innerHTML = inp2.value;
			div1.style.backgroundColor = "rgb(" + f1.innerHTML + ","
			+ f2.innerHTML + "," + f3.innerHTML + ")";
		}
		function m3() {
			f3.innerHTML = inp3.value;
			div1.style.backgroundColor = "rgb(" + f1.innerHTML + ","
			+ f2.innerHTML + "," + f3.innerHTML + ")";
		} */
		function m4() {
			var red = Math.floor(Math.random() * 256);
			var green = Math.floor(Math.random() * 256);
			var blue = Math.floor(Math.random() * 256);
			inp1.value = f1.innerHTML = red;
			inp2.value = f2.innerHTML = green;
			inp3.value = f3.innerHTML = blue;
			div1.style.backgroundColor = "rgb(" + red + "," + green + ","
					+ blue + ")";
			h1.style.color = "rgb(" + red + "," + green + "," + blue + ")";
		}
	</script>
</body>
</html>